<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="css/ext-all.css" rel="stylesheet" type="text/css" />
<style>
ul li{
	margin:5px 0 0 80px;
}
ul li a{
	text-decoration:none;
	font-size:12px;
}
</style>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
	new Ext.Viewport({
    layout: 'border',
    items: [{
		 region: 'north',
		 xtype:'panel',
		 height:100,
		 frme:true,
		 bodyStyle:'background-color:blue;'
		},{
		 region:'west',
		 collapsible: true,
		 xtype:'panel',
		 frme:true,
		 width:200,
		 title:'导航菜单',
		 layout:'accordion',
		 layoutConfig: {
                titleCollapse: false,
                animate: true,
                activeOnTop: true,
				},
		 html:'<ul><li><a href="http://qq.com" target="content">腾讯</a> </li><li><a href="#">管理</a></li><li><a href="#">管理</a></li></ul>'
		},{
		 regin:'center',
         layout:'fit',
         html:'<iframe name="content" src="http://baidu.com" width="1000px" height="800px"></iframe>',
		},{
          region:'south',
		  height:40,
          margins:'0 0 0 2',
          border:false,
          html:'<center><div class="menu south"><font size="5px">淘宝工具</font></div></center>'
         }]
});

	});
</script>
</head>

<body>
<div id="center">
  </div>
</body>
</html>
